<!-- 经典布局 -->
<template>
  <el-container class="layout">
    <el-header>
      <div class="logo flx-center">
        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
        <span class="logo-text">{{ title }}</span>
      </div>
      <div class="classic-top">
        <el-menu mode="horizontal" :router="false" :default-active="activeMenuTop">
          <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
          <template v-for="subItem in menuList">
            <el-sub-menu v-if="subItem.children?.length" :key="subItem.key" :index="subItem.key + 'el-sub-menu'">
              <template #title>
                <!-- <el-icon>
                  <component :is="subItem.meta.icon"></component>
                </el-icon> -->
                <span>{{ subItem.name }}</span>
              </template>
              <SubMenu :menu-list="subItem.children" @click-menu="handleClickMenuTop" />
            </el-sub-menu>
            <el-menu-item v-else :key="subItem.key + 'el-menu-item'" :index="subItem.key" @click="handleClickMenuTop(subItem)">
              <!-- <el-icon>
                <component :is="subItem.meta.icon"></component>
              </el-icon> -->
              <template #title>
                <span>{{ subItem.name }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <ToolBarRight />
    </el-header>
    <el-container class="classic-content">
      <el-aside>
        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '208px' }" v-if="leftMenuList && leftMenuList.length > 0">
          <CollapseIcon id="collapseIcon" />
          <el-scrollbar>
            <el-menu
              :router="false"
              :default-active="activeMenuLeft"
              :collapse="isCollapse"
              :unique-opened="accordion"
              :collapse-transition="false"
            >
              <SubMenu :menu-list="leftMenuList" @click-menu="handleClickMenuLeft" />
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container class="classic-main">
        <Main />
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts" name="layoutClassic">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
// import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import CollapseIcon from "@/layouts/components/Header/components/CollapseIcon.vue";
// import router from "@/routers";

const title = import.meta.env.VITE_GLOB_APP_TITLE;

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.authMenuListGet);
const leftMenuList = computed(() => authStore.showMenuListGet);
const activeMenuTop = computed(() => route.name?.toString().split("_")[0] as string);
let activeMenuLeft = ref("");

onMounted(() => {
  getSysAppName(leftMenuList.value);
});

watch(
  () => route.name,
  async () => {
    await authStore.getShowMenuList(activeMenuTop.value);
    getSysAppName(leftMenuList.value);
  }
);

function getSysAppName(menu: Menu.MenuOptions[]) {
  if (menu) {
    menu.forEach(item => {
      if (item.children) {
        getSysAppName(menu);
      } else {
        if (route.name?.toString().includes(item.key)) {
          activeMenuLeft.value = item.key; // 设置默认选中的菜单
        }
      }
    });
  }
}

const handleClickMenuTop = (subItem: Menu.MenuOptions) => {
  sessionStorage.setItem("cueMenu", JSON.stringify({ key: subItem.key, name: subItem.name }));
  sessionStorage.setItem("menu", subItem.key);
  window.location.href = subItem.path;
  // router.push(subItem.path)
};

const handleClickMenuLeft = (subItem: Menu.MenuOptions) => {
  router.push({ name: subItem.key });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
